<script setup>
import {onMounted, ref} from "vue";
import router from '@/router';
import axios from "axios";
import {ElMessage} from "element-plus";

const tableData = ref([]);

const userToken = ref(localStorage.getItem('user-token')?
    JSON.parse(localStorage.getItem('user-token')):null);

const userName = ref();

const getAppointmentByUserName = ()=>{
  if (userName.value==null||userName.value===''){
    getAppointmentsSelect(currentPage.value);
    ElMessage.error('请输入患者姓名!')
    return;
  }
  axios.get(BASE_URL+'/v1/appointments/selectByNickname/'+userName.value).then((response)=>{
    if (response.data.code===20000){
      tableData.value = response.data.data;
    }else ElMessage.error(response.data.message);
  })
}
onMounted(()=>{
  if (userToken.value == null) {
    ElMessage.error("请先登录!");
    router.push('/patient/login');
    return;
  }
  axios.defaults.headers.common['Authorization']=userToken.value;
  getAppointmentsSelect(currentPage.value);
})

const getAppointmentsSelect = (currentPage)=>{
  axios.get(BASE_URL+"/v1/appointments/select/pageNum="+currentPage).then((response)=>{
    if (response.data.code===20000){
      tableData.value = response.data.data.list;
      maxPage.value = response.data.data.maxPage;
    }else ElMessage.error(response.data.message)
  })
}

const searchToday=()=>{
  if (confirm('您确定要查询当天的预约吗?')){
    axios.get(BASE_URL+'/v1/appointments/searchToday/'+currentPage.value).then((response)=>{
      if (response.data.code===20000) {
        ElMessage.success('查询完成!');
        tableData.value = response.data.data.list;
      }
    })
  }
}
const searchLastWeek=()=>{
  if (confirm('您确定要查询7天内的预约吗?')){
    axios.get(BASE_URL+'/v1/appointments/searchLastWeek/'+currentPage.value).then((response)=>{
      if (response.data.code===20000) {
        ElMessage.success('查询完成!');
        tableData.value = response.data.data.list;
      }
    })
  }
}
const searchLastMonth=()=>{
  if (confirm('您确定要查询30天内的预约吗?')){
    axios.get(BASE_URL+'/v1/appointments/searchLastMonth/'+currentPage.value).then((response)=>{
      if (response.data.code===20000) {
        ElMessage.success('查询完成!');
        tableData.value = response.data.data.list;
      }
    })
  }
}


const del=(i,appointment)=>{
  if (confirm('您确定要删除这条预约吗?')){
    axios.post(BASE_URL+'/v1/appointments/'+appointment.id+'/delete').then((response)=>{
      if (response.data.code===20000) {
        ElMessage.success('删除完成!');
        getAppointmentsSelect(currentPage.value);
      }
    })
  }
}

const check = (appointment)=>{
  router.push('/newAppointment?id='+appointment.id);
}

const change = (appointment)=>{
  router.push('/newAppointment?Id='+appointment.id);
}

const handleCurrentChange = (val) => {
  currentPage.value = val;
  getAppointmentsSelect(currentPage.value);
}
const currentPage = ref(1)
const total = ref()
const maxPage = ref()
</script>

<template>
  <el-card style="height: 75px;width: 1645px">
    <el-container>
      <el-row style="width: 100%;height: 100%">
        <el-col :span="2" style="padding-top: 5px">
          <span style="text-align: left">患者姓名</span>
        </el-col>
        <el-col :span="4">
          <el-input v-model="userName" style="width: 200px;" placeholder="请输入患者的名字"/>
        </el-col>
        <el-col :span="12">
          <el-row style="padding-top: 5px">
            <el-col :span="3">
              <div style="color: gray;line-height: 30px">预约时间</div>
            </el-col>
            <el-col :span="2">
              <el-button @click="searchToday()" class="headerButton">今天</el-button>
            </el-col>
            <el-col :span="3">
              <el-button @click="searchLastWeek()" class="headerButton">最近7天</el-button>
            </el-col>
            <el-col :span="3">
              <el-button @click="searchLastMonth()" class="headerButton">最近一个月</el-button>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row>
            <el-button type="success" @click="getAppointmentByUserName()">搜索</el-button>
            <el-button type="primary" @click="router.push('/newAppointment')">新增预约</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-container>
  </el-card>

  <el-card style="margin-top:10px ;width: 1645px;height: 813px">
    <el-table :data="tableData" style="width: 100%; text-align: left;">
      <el-table-column width="50">
        <el-checkbox label="" size="large"></el-checkbox>
      </el-table-column>
      <el-table-column type="index" label="序号" width="80"/>
      <el-table-column prop="appointment" label="预约号" width="150"/>
      <el-table-column prop="nickname" label="患者姓名" width="100"/>
      <el-table-column prop="gender" label="性别" width="100"/>
      <el-table-column prop="number" label="就诊卡号" width="120"/>
      <el-table-column prop="mobile" label="手机号码" width="150"/>
      <el-table-column prop="project" label="预约项目" width="150"/>
      <el-table-column prop="type" label="预约号类型" width="120"/>
      <el-table-column prop="departmentName" label="预约科室" width="120"/>
      <el-table-column prop="doctorName" label="预约医生" width="120"/>
      <el-table-column prop="createDate" label="预约时间" width="190"/>
      <el-table-column prop="operate" label="操作" width="150">
        <template #default="scope">
          <el-button type="primary" @click="change(scope.row)" class="tableButton">编辑</el-button>
          <el-button type="success" @click="check(scope.row)" class="tableButton">查看</el-button>
          <el-button type="danger" @click="del(scope.$index,scope.row)" class="tableButton">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="divPagination">
      <el-pagination
          v-model:current-page="currentPage"
          layout="prev, pager, next, jumper"
          :total="maxPage*10"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>

</template>

<style scoped>
.divPagination {
  margin-left: 1300px;
  margin-top: 20px
}

.tableButton {
  height: 20px;
  width: 20px
}

.headerButton {
  border: none;
  line-height: 1px;
}

.headerButton:hover {
  background-color: white;
}

.headerButton:focus {
  background-color: white;
}
</style>